<style lang="scss" scoped>
#family-lefts {
    // .collapse {
    //     // ul li span {
    //     //     display: none;
    //     // }
    //     // ul li .iconstyle {
    //     //     left: 28px;
    //     // }
    //     display:block;
    //     .el-submenu,.is-active{
    //         width:78px;
    //     }
    //     .el-submenu__title{
    //         width:0 !important;
    //     }
    // }
    .nav-left {
        position: relative;
        background: #3C3F60;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
        .headPhoto {
            background: #3C3F60;
            text-align: center;
            padding-top: 17px;
            .username {
                padding-bottom: 10px;
                color: #6C7695;
                font-size: 16px;
            }
        }
        .el-menu {
            border-right: 1px solid #3C3F60;
            .el-menu-item {
                &.is-active {
                    background: #2B3245 !important;
                }
            }
        }
    }
}
</style>
<template>
    <div id="family-lefts">
        <div :class="menu">
            <div class="headPhoto">
                <img src="/static/images/home/headpic.jpg" />
                <div class="username">{{currentUser}}</div>
            </div>
            <el-menu background-color="#3C3F60" :collapse-transition='true' text-color="#EBEEF5" :collapse="collapse" router :default-openeds="['/familyMain']" :default-active="$route.path" active-text-color="#EBEEF5">
                <el-submenu index="/familyMain">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span style="margin-left:15px;">遗传咨询管理</span>
                    </template>
                    <el-menu-item index="/familyMain">
                        <span style="margin-left:25px;" slot="title">新患者</span>
                    </el-menu-item>
                    <el-menu-item index="/allPatient">
                        <span style="margin-left:25px;" slot="title">所有患者</span>
                    </el-menu-item>
                    <!-- <el-menu-item index="/importPatient">导入患者</el-menu-item>
                        <el-menu-item index="/dataimport">数据导入</el-menu-item> -->
                </el-submenu>
            </el-menu>

            <!-- <ul>               
                    <li><a href="javascript:;" @click="goHome($event)" class='active'><span class="iconstyle mydata"></span>我的数据</a></li>
                    <li><a href="javascript:;" @click="checkMyReport($event)"><span class="iconstyle myreport"></span>我的报告</a></li>   
                    <li style="display:none;"><a href="javascript:;"><span class="iconstyle set"></span>设置</a></li>
                </ul> -->
        </div>
    </div>
</template>

<script>
export default {
    name: "rare-left",
    props: ["collapse"],
    data() {
        return {
            // collapsed: false,
            currentUser: '',
            datapath: ''
        }
    },
    computed: {
        menu() {
            return this.collapse ? 'nav-left collapse' : 'nav-left'
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        checkMyReport(event) {
            $(".active").removeClass("active");
            $(event.target).addClass("active");
            this.$router.push("/myReport");
        },
        goHome(data) {
            $(".active").removeClass("active");
            $(data.target).addClass("active");
            if (this.$store.state.productId == 1) {
                this.$router.push("/rare");
            } else if (this.$store.state.productId == 2) {
                this.$router.push("/tumor");
            }
        }
    },
    created() {
        this.currentUser = this.$store.state.username;
    }
}
</script>



